<template>
  <div class="sti-wood-monitor">
    <div class="moitor-title">
      <span v-for="(item, index) in titleList" :key="index" :class=" item.opacityStatus ? 'opacityClick' : ''" @click="filterVirusEvent(item,index)">{{item.name}}</span>
    </div>
    <div class="moitor-main">
      <div class="moitor-main-header">
        <span>名称</span><span>类型</span><span>检测时间</span>
      </div>
      <div id="scrollContainer">
        <ul class="moitor-main-body" id="scrollOne" @mouseover="onMouseOver()" @mouseout="onMouseOut()">
          <li v-for="(key,index) in contentList" :key="index">
            <span :title="key.malware_type">{{key.malware_type}}</span>
            <span :style="{color: key.color}">{{key.data_type}}</span>
            <span :title="key.time">{{key.time}}</span>
          </li>
        </ul>
        <ul class="moitor-main-body " id="scrollTwo">
          <!-- <li v-for="(key,index) in contentList" :key="index">
            <span :title="key.malware_type">{{key.malware_type}}</span>
            <span :style="{color: key.color}">{{key.data_type}}</span>
            <span :title="key.time">{{key.time}}</span>
          </li> -->
        </ul>
        <div class="no-data" v-if="!contentList.length">
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['dataValue'],
  data() {
    return {
      titleList: [
        {
          name: '全部',
          opacityStatus: true
        },
        {
          name: '僵尸网络',
          opacityStatus: false
        },
        {
          name: '木马',
          opacityStatus: false
        },
        {
          name: '蠕虫',
          opacityStatus: false
        },
        {
          name: '病毒',
          opacityStatus: false
        },
        {
          name: '其它',
          opacityStatus: false
        }
      ],
      contentList: [],
      trojanArray: [],
      botnetArray: [],
      wormArray: [],
      virusArray: [],
      otherArray: []
    }
  },
  created() {
    this.trojanArray = []
    this.botnetArray = []
    this.wormArray = []
    this.virusArray = []
    this.otherArray = []

    this.dataValue.map(item => {
      item.time = this.$moment(item.found_time * 1).format('YYYY年MM月DD日')
      switch (item.data_type) {
        case '木马':
        item.color = '#31E3D6'
        this.trojanArray.push(item)
        break;
        case '僵尸网络':
        item.color = '#248BFC'
        this.botnetArray.push(item)

        break;
        case '蠕虫':
        item.color = '#1C9289'
        this.wormArray.push(item)
        break;
        case '病毒':
        item.color = '#FB4B8A'
        this.virusArray.push(item)
        break;
        default:
        item.color = '#FDCA86'
        this.otherArray.push(item)
      }
    })
    // console.log(this.trojanArray, 'this.trojanArray')
    // console.log(this.botnetArray, 'this.botnetArray')
    // console.log(this.wormArray, 'this.wormArray')
    // console.log(this.virusArray, 'this.virusArray')
    // console.log(this.otherArray, 'this.otherArray')

    this.contentList = this.dataValue
  },
  mounted() {
    this.scroll()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    onMouseOver() {
      clearInterval(this.timer)
    },
    onMouseOut() {
      clearInterval(this.timer)
      this.$nextTick(() => {
          this.scroll()
      })
    },
    filterVirusEvent(item, index) {
       clearInterval(this.timer)
      this.contentList = []
      // let scrollOne = document.getElementById('scrollOne')
      let scrollTwo = document.getElementById('scrollTwo')
      // scrollOne.innerHTML = ''
      scrollTwo.innerHTML = ''

      this.titleList.map((item, key) => {
        if (index == key) {
          item.opacityStatus = true
          // if (item.opacityStatus) {
          //   item.opacityStatus = false
          // } else {
          //   item.opacityStatus = true
          // }
        } else {
          item.opacityStatus = false
          // this.contentList = this.dataValue
        }
      })

      switch (index) {
        case 0:
        this.contentList = this.dataValue
        console.log(this.contentList, 'this.contentList')
        break;
        case 1:
        this.contentList = this.botnetArray
        console.log(this.contentList, 'this.contentList')
        break;
        case 2:
        this.contentList = this.trojanArray
                console.log(this.contentList, 'this.contentList')
        break;
        case 3:
        this.contentList = this.wormArray
                console.log(this.contentList, 'this.contentList')
        break;
        case 4:
        this.contentList = this.virusArray
                console.log(this.contentList, 'this.contentList')
        break;
        case 5:
        this.contentList = this.otherArray
                console.log(this.contentList, 'this.contentList')
        break;
      }
      this.$nextTick(() => {
          this.scroll()
      })
      // setTimeout(() => {
      //     this.scroll()
      // }, 1000)

    },
    getConentList(index) {
      switch (index) {
        case 0:
        this.contentList = this.botnetArray
        break;
        case 1:
        this.contentList = this.trojanArray
        break;
        case 2:
        this.contentList = this.wormArray
        break;
        case 3:
        this.contentList = this.virusArray
        break;
        case 4:
        this.contentList = this.otherArray
        break;
      }
      return this.contentList
    },
    scroll() {
      let scrollContainer = document.getElementById('scrollContainer')
      let scrollOne = document.getElementById('scrollOne')
      let scrollTwo = document.getElementById('scrollTwo')
      let listHeight = scrollOne.offsetHeight
      let wrapHeight = scrollContainer.offsetHeight
      scrollTwo.innerHTML = ''
      if (listHeight > wrapHeight) {
        scrollTwo.innerHTML = scrollOne.innerHTML
        clearInterval(this.timer)
        this.timer = setInterval(function() {
          if (scrollContainer.scrollTop === scrollOne.offsetHeight) {
            scrollContainer.scrollTop = 0
          } else {
            scrollContainer.scrollTop++
          }
        }, 80)
      }
    }
  }
}
</script>

<style lang="less">
.sti-wood-monitor{
  width: 100%;
  height:100%;
  .moitor-title{
    margin-top:10px;
    width: 100%;
    overflow: hidden;
    .opacityClick{
      opacity: 1;
    }
    .opacityClickAll{
      opacity: 1;
    }
    span{
      width: 60px;
      border-radius: 10px;
      float: left;
      color: black;
      height: 25px;
      line-height: 25px;
      text-align: center;
      margin-right: 5px;
      // margin-left:5px;
      cursor: pointer;
      opacity: 0.7;
      &:nth-child(1){

        width: 50px;

        background: rgb(236, 221, 6);
      }
      &:nth-child(2){
        width: 80px;
        background: #148BFF;
      }
      &:nth-child(3){
        background: #00E1D6;
      }
      &:nth-child(4){
        background: #00918A;
      }
      &:nth-child(5){
        background: #FF528A;
      }
      &:nth-child(6){
        background: #FFCB81;
      }
    }
  }

  .moitor-main{
    width: 100%;
    height: 100%;
    .moitor-main-header{
      width: 100%;
      overflow: hidden;
      span{
        height: 35px;
        text-align: center;
        line-height: 35px;
        width: 150px;
        float: left;
        color:rgb(34, 228, 235);
        font-size: 18px;
        font-weight: bold;
        background: #003248;
        border-right:1px solid #002B41;

        &:nth-child(2){
          width: 80px;
        }
        &:nth-child(3){
          width: 170px;
        }
      }
    }
    #scrollContainer{
      width: 100%;
      height: 78%;
      overflow: hidden;
      .no-data{
        width: 100%;
        height:300px;
        line-height: 300px;
        color: #00E1D6;
      }
      .moitor-main-body{
        width: 100%;
        li{
          width: 100%;
          overflow: hidden;
          &:nth-child(even){
            background: #043749;
          }
          &:nth-child(odd){
          background: #082230;
          }
          span{
            height: 45px;
            text-align: center;
            line-height: 45px;
            width: 150px;
            float: left;
            // background: #003248;
            border-right:1px solid #002B41;
            overflow: hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            &:nth-child(1){
              width: 150px;

            }
            &:nth-child(2){
              width: 80px;
            }
            &:nth-child(3){
              width: 170px;
              padding-left:2px;
            }
          }
        }
      }
      #scrollTwo{
        width: 100%;
        li{
            width: 100%;
            overflow: hidden;
            &:nth-child(odd){
              background: #043749;
            }
            &:nth-child(even){
            background: #082230;
            }
         }
      }
    }

  }
}
</style>
